<template>
  <el-card>
    <template #header>
      <div style="display: flex; justify-content: end;margin-top: 10px">
        <el-button type="primary" :icon="Plus" @click="addTableRole">添加</el-button>
      </div>
    </template>
      <el-table :data="tableData"
                height="calc(100vh - 180px )"
                :header-cell-style="{ background: '#EEEEEE' }"
                :border="borderStatus"
                style="width: 100%"
                :element-loading-text="loadingText"
                @selection-change="changeSelect"
      >
        <el-table-column type="index" width="50"/>
        <template v-if="isSelect">
          <el-table-column type="selection" width="55"/>
        </template>
        <template v-for="(item,index) in tableHead" :key="index">
          <el-table-column :prop="item.column_name"
                           :label="item.column_comment"
          />
        </template>
        <template v-for="item in tableColumn" :key="item.id">
          <el-table-column :prop="item.column_age"
                           :label="item.column_name"
                           :width="item.width"
          />
        </template>
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <el-button size="small" type="primary" v-if="state.lookStatus" @click="handleLook(scope.$index, scope.row)">查看</el-button>
            <el-button size="small" type="primary" v-if="state.editStatus" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" v-if="state.deleteStatus" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'

const props = defineProps({
  tableHead: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableColumn: {
    type: Array,
    default: () => []
  },
  borderStatus: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: '加载中...'
  },
  state: {
    type: Object,
    default: () => {
      return {
        lookStatus: Boolean,
        editStatus: Boolean,
        deleteStatus: Boolean
      }
    }
  },
  isSelect: {
    type: Boolean,
    default: false
  }
})

const handleEdit = (index: number, row: any) => {
  emit('edit', row)
}
const handleDelete = (index: number, row: any) => {
  emit('delete', row)
}
const handleLook = (index: number, row: any) => {
  emit('look', row)
}
const addTableRole = () => {
  emit('add')
}
const changeSelect = (row:any)=>{
  console.log('当前行的数据======>',row)
  row.forEach((item:any)=>{
    console.log(item)
  })
  emit('changeSelect',row)
}
// 把方法传给父组件
const emit = defineEmits(['edit', 'delete', 'look', 'add','changeSelect'])
</script>


<style scoped lang="scss">
.boxTable {
  margin-top: 20px;
}
</style>